var cityIpt = document.getElementById('city');
var searchBtn = document.getElementById('search');
var cityP = document.querySelector('.city p')
var timpP = document.querySelector('.wthreetemp p');
var content = document.getElementById('owl-demo')
searchBtn.onclick = function() {
    var city = cityIpt.value;

    var xhr = new XMLHttpRequest();
    var url = `http://wthrcdn.etouch.cn/weather_mini?city=${city}`
    xhr.open("GET", url)
    xhr.send()

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var dataText = xhr.responseText;
            var data = JSON.parse(dataText).data;
            console.log(data)
            setWeather(data)
        }
    }
}

function setWeather(data) {
    cityP.innerText = data.city;
    timpP.innerText = data.wendu + "° C";
    var weatherArray = data.forecast;
    html = ''
    var types = ["clear-day", "wind", "sleet", "rain", "fog", "partly-cloudy-day", "snow", "cloudy"]
    for (var i = 0; i < weatherArray.length; i++) {
        var weather = weatherArray[i]

        var str = `<div class="item w3threeitem agileinfo w3threeitem2">
        <h4>${weather.date}</h4>
        <figure class="icons wthree agileits w3layouts">
            <canvas id="sleet" width="50" class="w3ls" height="50"></canvas>
        </figure>
        <h5>${weather.high}</h5>
        <h6>${weather.low}</h6>
    </div>`
        html += str
    }
    content.innerHTML = html
    $("#owl-demo").owlCarousel({
        autoPlay: 3000,
        items: 5,
        itemsDesktop: [1024, 4],
        itemsDesktopSmall: [640, 3]
    });
    setTimeout(iconplay, 500)


}

function iconplay() {

    var icons = new Skycons({
            "color": "#FFFFFF"
        }),
        list = [
            "clear-day", "clear-night", "partly-cloudy-day", "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind", "fog"
        ],
        i;
    for (i = list.length; i--;)
        icons.set(list[i], list[i]);
}